<template>
  <div class="content">
    <div class="hqy_middle">
      <div class="hqy_logo">
        <img src="../assets/images/index/hqyjy_logo.png" alt @click="handleSelect(1)" />
      </div>
      <div class="header_right">
        <div class="basic">
          <p>
            <img src="../assets/images/index/phone.png" alt />
            400-010-6988
          </p>
          <p class="hqy_login">
            <span>登录</span>
            <span>注册</span>
          </p>
          <p class="visit">
            <a href="http://www.hqy2001.com/" target="_blank">
              访问华清园在线
              <img src="../assets/images/index/hqy.png" alt />
            </a>
          </p>
        </div>
        <div class="navigation">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            router
            text-color="#8B8B8B"
            active-text-color="#7F2189"
          >
            <el-menu-item @click='jumppage("index")' index="index">首页</el-menu-item>
            <el-menu-item @click='jumppage("HZ")' index="HZ">黄庄校区</el-menu-item>
            <el-menu-item @click='jumppage("JY")' index="JY">金源校区</el-menu-item>
            <el-menu-item @click='jumppage("GZF")' index="GZF">公主坟校区</el-menu-item>
            <el-menu-item @click='jumppage("ZGC")' index="ZGC">中关村校区</el-menu-item>
            <el-menu-item @click='jumppage("DZM")' index="DZM">东直门校区</el-menu-item>
            <el-menu-item @click='jumppage("SD")' index="SD">上地校区</el-menu-item>
            <el-menu-item @click='jumppage("about")' index="about">关于我们</el-menu-item>
          </el-menu>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    activeIndex() {
      return this.$route.path.slice(1);
    }
  },
  methods: {
    jumppage(lable){
       window.location.href='/#/'+lable
    },

    // 用来获取需要跳转的页面--ysy
    handleSelect(key, keyPath) {
      console.log(...arguments);
    //   // if (key == '1') {
    //   //   this.$router.replace({
    //   //     path: '/'
    //   //   })
    //   // }
    //   // if (key == '2') {
    //   //   this.$router.replace({
    //   //     path: '/HzCampus'
    //   //   })
    //   // }
    //   // if (key == '3') {
    //   //   this.$router.replace({
    //   //     path: '/JinyuanCampus'
    //   //   })
    //   // }
    //   // if (key == '4') {
    //   //   this.$router.replace({
    //   //     path: '/GzfCampus'
    //   //   })
    //   // }
    //   // if (key == '5') {
    //   //   this.$router.replace({
    //   //     path: '/ZgCampus'
    //   //   })
    //   // }
    //   // if (key == '6') {
    //   //   this.$router.replace({
    //   //     path: '/DzmCampus'
    //   //   })
    //   // }
    //   // if (key == '7') {
    //   //   this.$router.replace({
    //   //     path: '/SdCampus'
    //   //   })
    //   // }
    //   // if (key == '8') {
    //   //   this.$router.replace({
    //   //     path: '/about'
    //   //   })
    //   // }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  height: 106px;
  width: 100%;
  min-width: 1400px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  .hqy_middle {
    width: 1200px;
    height: 100%;
    text-align: right;
    position: relative;
    .hqy_logo {
      display: inline-block;
      position: absolute;
      top: 26px;
      left: 0px;
    }
    .header_right {
      display: inline-block;
      width: 900px;
      height: 100%;
      padding: 8px;
      box-sizing: border-box;
      .basic {
        text-align: right;
        p {
          display: inline-block;
          font-size: 14px;
          margin: 0;
          margin-right: 24px;
        }
        p:first-child {
          color: #7f2189;
          font-weight: 700;
          font-size: 16px;
          margin-right: 47px;
          img {
            display: inline-block;
            width: 16px;
            vertical-align: middle;
            margin-right: 4px;
          }
        }
        p.hqy_login {
          display: none;
          span {
            display: inline-block;
            width: 55px;
            height: 29px;
            line-height: 29px;
            text-align: center;
            font-size: 14px;
          }
          span:first-child {
            margin-right: 22px;
            color: #7f2189;
            border: 1px solid #7f2189;
            border-radius: 5px;
          }
          span:last-child {
            color: #fff;
            background: #7f2189;
            border-radius: 5px;
            margin-right: 25px;
          }
        }
        p.visit {
          font-size: 16px;
          color: #8b8b8b;
          cursor: pointer;
          a {
            text-decoration: none;
            color: #8b8b8b;
            &:hover {
              color: #7f2189;
            }
          }
          img {
            display: inline-block;
            width: 39px;
            vertical-align: middle;
          }
        }
      }
      .navigation {
        text-align: right;
      }
    }
  }
}
.el-menu--horizontal > .el-menu-item {
  // color: #8B8B8B;
}
.el-menu.el-menu--horizontal {
  border: none;
}
.el-menu-item {
  font-size: 16px;
  padding: 6px;
  margin: 0 16px;
}
.el-menu-item.is-active {
  color: #7f2189;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 4px solid #7f2189;
}
</style>